<!--
 * @Author: your name
 * @Date: 2020-08-25 12:31:34
 * @LastEditTime: 2020-08-25 16:29:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ryfront\src\modules\roles\Update.vue
-->
<template>
    <div>
        <el-row>
            <el-form ref="roleForm"  :model="role" label-width="120px">
                
                <el-form-item label="角色名称" >
                    <el-input v-model="role.roleName" size="small" ></el-input>
                </el-form-item>

                <el-form-item label="角色编码">
                    <el-input v-model="role.roleCode" size="small"></el-input>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="role.isUse" active-color="#13ce66" inactive-color="#ff4949" ></el-switch>
                </el-form-item>

                <el-form-item>
                    <el-button size="small" @click="saveRole" type="primary" >修改</el-button>
                    <el-button size="small" @click="closeDialog" >取消</el-button>
                </el-form-item>

            </el-form>
        </el-row>
    </div>
</template>

<script>
    import {roleUpd} from '@/api/index';
    export default {
        name:'roleUpd',
        props:{
            roleDetail:{
                type:Object,
                default:{}
            }
        },
        data(){
            return {
                role:{
                    roleId:'',
                    roleName: '',
                    roleCode: '',
                    createTime:'',
                    isUse: false,
                    status: '',
                }
            }
        },
        methods: {
            closeDialog(){
                this.$emit("closeDialog",true);
            },
            //修改
            saveRole(){
                //验证表单
                this.role.status = this.role.isUse == true ? '1': '0';//可以做监听
                roleUpd(this.role).then((result) => {
                    if(result.status == 200){
                        this.$message({
                            type: "success",
                            message:'修改角色成功',
                            duration: 2000
                        });
                        this.closeDialog();
                    }  
                })
            }
        },
        mounted() {
            this.role.roleId = this.roleDetail.roleId;
            this.role.roleName = this.roleDetail.roleName;
            this.role.createTime = this.roleDetail.createTime;
            this.role.roleCode = this.roleDetail.roleCode;
            this.role.isUse = this.roleDetail.status == "1"? true:false;
        },
        watch: {
            role:function(oval,nval){
                this.role.roleId = nval.roleId;
                this.role.roleName = nval.roleName;
                this.role.createTime = nval.createTime;
                this.role.roleCode = nval.roleCode;
                this.role.isUse = nval.status == "1"? true:false;
            }
        },
    }
</script>

<style scoped>


</style>